<template>
  <div class="warp" ref="warp">
    <div @scroll="scrollHandler" class="scroll-box" ref="scroll-box">
      <div class="scroll-container" ref="scroll-container">
        <slot></slot>
      </div>
    </div>
    <div class="scroll-bar" ref="scroll-bar">
      <div class="scroll-button-up"></div>
      <div @mousedown="mousedownHandler($event)" class="scroll-tump" ref="scroll-tump"></div>
      <div class="scroll-button-down"></div>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, ref } from '@vue/composition-api'
export default {
  name: 'scroll-bar',
  setup() {
    const height = ref(0)
    const isDown = ref(false)
    const dy = ref(0)
    const scroll_box = ref(null)
    const scroll_container = ref(null)
    const warp = ref(null)
    const scroll_bar = ref(null)
    const scroll_tump = ref(null)
    const originY = ref(0)
    const isMac = ref(navigator.userAgent.toLocaleLowerCase().indexOf('mac os x'))
    function resize() {
      if (isMac.value !== -1) {
        scroll_box.value.style.paddingRight = 17 + 'px'
      }
      // warp.style.width = `${scroll_box.clientWidth}px`
      // scroll_bar.value.style.width = `${scroll_box.value.offsetWidth - scroll_box.value.clientWidth}px`
      scroll_bar.value.style.width = '17px'
      if (scroll_box.value.offsetWidth - scroll_box.value.clientWidth === 0) {
        scroll_box.value.style.paddingRight = 17 + 'px'
      } else {
        scroll_box.value.style.paddingRight = '0px'
      }
      if (scroll_container.value.offsetHeight > scroll_box.value.offsetHeight) {
        scroll_tump.value.style.height = `${
          (scroll_box.value.offsetHeight * (scroll_box.value.offsetHeight - 32)) / scroll_container.value.offsetHeight
        }px`
      } else {
        scroll_tump.value.style.height = `${scroll_box.value.offsetHeight - 32}px`
      }
    }
    onMounted(() => {
      resize()
      height.value = scroll_container.value.offsetHeight
      const callback = function (mutationsList, observer) {
        if (scroll_container.value.offsetHeight !== height.value) {
          resize()
          height.value = scroll_container.value.offsetHeight
        }
      }

      // 创建一个观察器实例并传入回调函数
      const observer = new MutationObserver(callback)

      // 以上述配置开始观察目标节点
      observer.observe(scroll_container.value, { childList: true, subtree: true })
    })

    function scrollHandler() {
      scroll_tump.value.style.transform = `translateY(${
        (scroll_box.value.scrollTop * (scroll_bar.value.offsetHeight - 32 - scroll_tump.value.offsetHeight)) /
        (scroll_container.value.offsetHeight - scroll_box.value.offsetHeight)
      }px)`
    }

    function mousedownHandler(e) {
      e.preventDefault()
      dy.value = e.pageY
      originY.value = Number(getComputedStyle(scroll_tump.value).transform.split(',').pop().replace(')', ''))
      isDown.value = true
    }

    function mousemoveHandler(e) {
      if (isDown.value) {
        let goalY = originY.value + e.pageY - dy.value

        if (goalY > scroll_bar.value.offsetHeight - 32 - scroll_tump.value.offsetHeight) {
          goalY = scroll_bar.value.offsetHeight - 32 - scroll_tump.value.offsetHeight
        } else if (goalY < 0) {
          goalY = 0
        }
        let scrollY =
          (goalY * (scroll_container.value.offsetHeight - scroll_box.value.offsetHeight)) /
          (scroll_bar.value.offsetHeight - 32 - scroll_tump.value.offsetHeight)
        scroll_tump.value.style.transform = `translateY(${goalY}px)`
        scroll_box.value.scrollTo(0, scrollY)
      }
    }

    function scrollTo(x, y) {
      scroll_box.value.scrollTo(x, y)
    }

    const scrollHeight = computed(() => {
      return scroll_box.value.scrollHeight
    })

    const scrollTop = computed(() => {
      return scroll_box.value.scrollTop
    })

    const offsetHeight = computed(() => {
      return scroll_box.value.offsetHeight
    })

    window.addEventListener('mousemove', (e) => mousemoveHandler(e))

    window.addEventListener('mouseup', () => {
      isDown.value = false
    })

    return {
      isDown,
      dy,
      'scroll-box': scroll_box,
      'scroll-container': scroll_container,
      warp,
      'scroll-bar': scroll_bar,
      'scroll-tump': scroll_tump,
      isMac,
      originY,
      mousedownHandler,
      scrollHandler,
      scrollTo,
      scrollHeight,
      scrollTop,
      offsetHeight,
    }
  },
}
</script>

<style scoped>
.warp {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.scroll-box {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.scroll-box > .scroll-container {
  width: 100%;
  background: linear-gradient(180deg, red, green);
}
.scroll-bar {
  position: absolute;
  right: 0;
  height: 100%;
  background: #0d2446;
  border: 1px solid #0e3e82;
  top: 0;
}
.scroll-tump {
  width: 100%;
  background: #284e88;
  border-radius: 4px;
  transform: translateY(0);
  cursor: pointer;
  position: absolute;
  top: 16px;
}
.scroll-button-up {
  height: 16px;
  width: 100%;
  background: url('@/assets/mainScreenImage/矢量智能对象2.png') center center no-repeat;
  position: absolute;
  top: 0;
}
.scroll-button-down {
  height: 16px;
  width: 100%;
  background: url('@/assets/mainScreenImage/矢量智能对象.png') center center no-repeat;
  position: absolute;
  bottom: 0;
}
</style>